import { Form,  } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Radio, Avatar } from 'antd';
import { ContactsOutlined, ClusterOutlined, HomeOutlined, UserOutlined  } from '@ant-design/icons';
import manAvatar from '@/assets/avatar/default-avatar-man.png';
import womanAvatar from '@/assets/avatar/default-avatar-woman.png';
import React from 'react';
import styles from './index.less';

const FormItem = Form.Item;
const { TextArea } = Input;

const editPerson = props => {
  const { visible, currentUser = {}, currentUserLoading, onSubmit, onClose } = props;
  
  const okHandle = () => {
    onSubmit()
  };
  
  const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length);

  const formLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 15,
    },
  };

  return (
    <Modal
      className={styles.personCard}
      visible={visible}
      onOk={okHandle}
      onCancel={onClose}
      okText='保存'
      cancelText='取消'
      title='个人设置'
      width="30%"
      bodyStyle={{ minHeight: '60vh', display: 'flex', flexDirection: 'column' }}
    >
      {
          !dataLoading && (
            <div>
              <div className={styles.personPic}>
              {
                  currentUser.photo
                  ? <Avatar  style={{width:'100%', height: '100%'}} src={currentUser.photo} />
                  : <Avatar style={{width:'100%', height: '100%', fontSize: '80px'}} size={64}  src={currentUser.sex == '0' ? womanAvatar : manAvatar} />
                }
              </div>
              <FormItem {...formLayout} label="性别">
                <Radio.Group value='1' disabled>
                  <Radio value="1">男</Radio>
                  <Radio value="0">女</Radio>
                </Radio.Group>
              </FormItem>
              <FormItem {...formLayout} label="出生日期：">
                <Input disabled value={currentUser.tuBdate}/>
              </FormItem>
              <FormItem {...formLayout} label="工号：">
                <Input disabled value={currentUser.tuNo}/>
              </FormItem>
              <FormItem {...formLayout} label="部门：">
                <Input disabled value={currentUser.deptName}/>
              </FormItem>
              <FormItem {...formLayout} label="航站：">
                <Input disabled value={currentUser.airport}/>
              </FormItem>
              <FormItem {...formLayout} label="职位：">
                <Input disabled value='' />
              </FormItem>
              <FormItem {...formLayout} label="电话：">
                <Input disabled value={currentUser.tuMobile}/>
              </FormItem>
              <FormItem {...formLayout} label="邮箱：">
                <Input disabled value={currentUser.tuEmail}/>
              </FormItem>
            </div>
          )
      }

    </Modal>
  );
};

export default Form.create()(editPerson);
